<template>
  <view class="brand-edit">
    <view class="page-header">
      <text class="title">{{ isEdit ? '编辑品牌' : '新增品牌' }}</text>
    </view>

    <view class="form-content">
      <view class="form-section">
        <!-- 品牌名称 -->
        <view class="form-item">
          <text class="label required">品牌名称</text>
          <input 
            v-model="formData.name" 
            type="text" 
            placeholder="请输入品牌名称"
            class="input"
          />
        </view>

        <!-- 品牌Logo -->
        <view class="form-item">
          <text class="label required">品牌Logo</text>
          <view class="image-uploader">
            <view 
              v-if="formData.picUrl" 
              class="image-preview"
              @click="handleUploadImage"
            >
              <image :src="formData.picUrl" mode="aspectFit" />
              <view class="image-actions">
                <text class="action-btn" @click.stop="handleRemoveImage">删除</text>
              </view>
            </view>
            <view 
              v-else 
              class="upload-btn"
              @click="handleUploadImage"
            >
              <text class="upload-icon">+</text>
              <text class="upload-text">上传Logo</text>
            </view>
          </view>
        </view>

        <!-- 品牌描述 -->
        <view class="form-item">
          <text class="label">品牌描述</text>
          <textarea 
            v-model="formData.description" 
            placeholder="请输入品牌描述"
            class="textarea"
          />
        </view>

        <!-- 排序 -->
        <view class="form-item">
          <text class="label">排序</text>
          <input 
            v-model="formData.sort" 
            type="number" 
            placeholder="请输入排序值，数值越小越靠前"
            class="input"
          />
        </view>

        <!-- 状态 -->
        <view class="form-item">
          <text class="label">状态</text>
          <view class="status-switch">
            <switch 
              :checked="formData.status === 1"
              @change="handleStatusChange"
            />
            <text class="status-text">{{ formData.status === 1 ? '启用' : '停用' }}</text>
          </view>
        </view>
      </view>

      <!-- 保存按钮 -->
      <view class="form-actions">
        <button 
          type="primary" 
          class="save-btn"
          @click="handleSave"
        >
          保存
        </button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import type { BrandVO } from '@/api/product/brand'

// 获取路由参数
const isEdit = ref(false)
const brandId = ref<number>()

onMounted(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const { id } = currentPage.$page?.options || {}
  if (id) {
    isEdit.value = true
    brandId.value = Number(id)
    loadBrandDetail()
  }
})

// 表单数据
const formData = ref<Partial<BrandVO>>({
  name: '',
  picUrl: '',
  description: '',
  sort: 0,
  status: 1
})

// 加载品牌详情
const loadBrandDetail = async () => {
  // TODO: 实现加载品牌详情的逻辑
  console.log('加载品牌ID:', brandId.value)
}

// 处理图片上传
const handleUploadImage = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      // TODO: 实现图片上传逻辑
      formData.value.picUrl = res.tempFilePaths[0]
    }
  })
}

// 处理图片删除
const handleRemoveImage = () => {
  formData.value.picUrl = ''
}

// 处理状态切换
const handleStatusChange = (e: any) => {
  formData.value.status = e.detail.value ? 1 : 0
}

// 保存品牌
const handleSave = async () => {
  // 表单验证
  if (!formData.value.name?.trim()) {
    uni.showToast({
      title: '请输入品牌名称',
      icon: 'none'
    })
    return
  }

  if (!formData.value.picUrl) {
    uni.showToast({
      title: '请上传品牌Logo',
      icon: 'none'
    })
    return
  }

  // TODO: 实现保存逻辑
  console.log('保存品牌:', formData.value)
}
</script>

<style lang="scss">
.brand-edit {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 120rpx;

  .page-header {
    background-color: #fff;
    padding: 30rpx 40rpx;
    border-bottom: 1px solid #dcdfe6;

    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #303133;
    }
  }

  .form-content {
    padding: 20rpx;

    .form-section {
      background-color: #fff;
      border-radius: 4rpx;
      padding: 20rpx;

      .form-item {
        margin-bottom: 30rpx;

        .label {
          display: block;
          margin-bottom: 10rpx;
          font-size: 28rpx;
          color: #606266;

          &.required::before {
            content: '*';
            color: #f56c6c;
            margin-right: 4rpx;
          }
        }

        .input {
          width: 100%;
          height: 70rpx;
          border: 1px solid #dcdfe6;
          border-radius: 4rpx;
          padding: 0 20rpx;
          font-size: 28rpx;
        }

        .textarea {
          width: 100%;
          height: 200rpx;
          border: 1px solid #dcdfe6;
          border-radius: 4rpx;
          padding: 20rpx;
          font-size: 28rpx;
        }

        .image-uploader {
          .image-preview {
            width: 200rpx;
            height: 200rpx;
            border: 1px solid #dcdfe6;
            border-radius: 4rpx;
            position: relative;
            overflow: hidden;

            image {
              width: 100%;
              height: 100%;
            }

            .image-actions {
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              background-color: rgba(0, 0, 0, 0.6);
              padding: 10rpx;
              display: flex;
              justify-content: center;

              .action-btn {
                color: #fff;
                font-size: 24rpx;
              }
            }
          }

          .upload-btn {
            width: 200rpx;
            height: 200rpx;
            border: 1px dashed #dcdfe6;
            border-radius: 4rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;

            .upload-icon {
              font-size: 60rpx;
              color: #c0c4cc;
              margin-bottom: 10rpx;
            }

            .upload-text {
              font-size: 24rpx;
              color: #909399;
            }
          }
        }

        .status-switch {
          display: flex;
          align-items: center;
          gap: 20rpx;

          .status-text {
            font-size: 28rpx;
            color: #606266;
          }
        }
      }
    }

    .form-actions {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #fff;
      padding: 20rpx;
      box-shadow: 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);

      .save-btn {
        margin: 0;
      }
    }
  }
}
</style>